<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="退款状态" prop="status">
        <el-select v-model="queryParams.status" placeholder="退款状态" clearable>
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="退款时间" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          type="daterange"
          align="right"
          unlink-panels
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="退款单号" prop="orderRefundSn">
        <el-input
          v-model="queryParams.orderRefundSn"
          placeholder="请输入退款单号"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table v-loading="loading" :data="refundList" @selection-change="handleSelectionChange">
      <!--<el-table-column type="selection" width="55" align="center" />
      <el-table-column label="退款订单id" align="center" prop="orderRefundId" />-->
      <el-table-column label="退款订单号" align="center" prop="orderRefundSn" width="160"/>
      <el-table-column label="原订单号" align="center" prop="orderSn" width="160"/>
      <el-table-column label="商品信息" align="center" width="300">
        <template slot-scope="scope">
          <div v-for="(item, index) in scope.row.orderGoodsData" :key="item.id" class="product-item">
            <div class="product-info">
              <div class="product-image">
                <el-image
                  :src="domainPrefix + item.image"
                  fit="fill"
                  style="width: 50px; height: 50px;"
                ></el-image>
              </div>
              <div class="product-title">
                <el-tooltip placement="top" effect="dark">
                  <div slot="content" class="tooltip-content">
                    商品名称：{{ item.title }}<br />
                    支付价格：¥{{ item.totalPrice }}<br />
                    购买数量：{{ item.goodsNum }}
                  </div>
                  <div class="ellipsis-text">{{ item.title }}</div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="用户信息" align="center" prop="realName"/>
      <el-table-column label="实际支付" align="center" prop="payPrice"/>
      <el-table-column label="发起退款时间" align="center" prop="createTime" width="150"/>
      <el-table-column label="退款状态" align="center" width="130">
        <template slot-scope="scope">
          <div class="vertical-content">
            <div v-if="scope.row.status === 0">退款中</div>
            <div v-if="scope.row.status === -1">拒绝退款</div>
            <div v-if="scope.row.status === -1">原因：{{ scope.row.failMessage }}</div>
            <div v-if="scope.row.status === 3">已退款</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center">
        <template slot-scope="scope">
          <div class="vertical-content">
            <div v-if="scope.row.orderStatus === 0">待发货</div>
            <div v-if="scope.row.orderStatus === 1">待收货</div>
            <div v-if="scope.row.orderStatus === 2">待评价</div>
            <div v-if="scope.row.orderStatus === 3">已完成</div>
            <div v-if="scope.row.orderStatus === 4">拼团中</div>
            <div v-if="scope.row.orderStatus === 5">已退款</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="退款信息" align="center" prop="refundMessage" width="150"/>
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" width="80">
        <template slot-scope="scope">
          <el-dropdown size="mini" @command="(command) => handleCommand(command, scope.row)" v-hasPermi="['order:refund:details', 'order:refund:remark','order:refund:refund','order:refund:not:refund']">
            <el-button size="mini" type="text" icon="el-icon-d-arrow-right">更多</el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="handleDetails" icon="el-icon-view"
                                v-hasPermi="['order:refund:details']">订单详情</el-dropdown-item>
              <el-dropdown-item command="handleRemark" icon="el-icon-notebook-1"
                                v-hasPermi="['order:refund:remark']">售后备注</el-dropdown-item>
              <el-dropdown-item command="handleRefundOrder" icon="el-icon-position"
                                v-hasPermi="['order:refund:refund']" v-if="scope.row.status === 0">立即退款</el-dropdown-item>
              <el-dropdown-item command="handleNotReceiveOrder" icon="el-icon-circle-close"
                                v-hasPermi="['order:refund:not:refund']" v-if="scope.row.status === 0">不退款</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改订单退款对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="退款单号" prop="orderRefundSn">
          <el-input v-model="form.orderRefundSn" placeholder="请输入退款单号" />
        </el-form-item>
        <el-form-item label="订单id" prop="orderId">
          <el-input v-model="form.orderId" placeholder="请输入订单id" />
        </el-form-item>
        <el-form-item label="用户id" prop="uid">
          <el-input v-model="form.uid" placeholder="请输入用户id" />
        </el-form-item>
        <el-form-item label="商户id" prop="merId">
          <el-input v-model="form.merId" placeholder="请输入商户id" />
        </el-form-item>
        <el-form-item label="退还一级佣金" prop="extensionOne">
          <el-input v-model="form.extensionOne" placeholder="请输入退还一级佣金" />
        </el-form-item>
        <el-form-item label="退还二级佣金" prop="extensionTwo">
          <el-input v-model="form.extensionTwo" placeholder="请输入退还二级佣金" />
        </el-form-item>
        <el-form-item label="收货人" prop="merDeliveryUser">
          <el-input v-model="form.merDeliveryUser" placeholder="请输入收货人" />
        </el-form-item>
        <el-form-item label="收货地址" prop="merDeliveryAddress">
          <el-input v-model="form.merDeliveryAddress" placeholder="请输入收货地址" />
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="form.phone" placeholder="请输入联系电话" />
        </el-form-item>
        <el-form-item label="备注" prop="mark">
          <el-input v-model="form.mark" placeholder="请输入备注" />
        </el-form-item>
        <el-form-item label="后台备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入后台备注" />
        </el-form-item>
        <el-form-item label="图片" prop="pics">
          <el-input v-model="form.pics" placeholder="请输入图片" />
        </el-form-item>
        <el-form-item label="退款原因" prop="refundMessage">
          <el-input v-model="form.refundMessage" placeholder="请输入退款原因" />
        </el-form-item>
        <el-form-item label="退款金额" prop="refundPrice">
          <el-input v-model="form.refundPrice" placeholder="请输入退款金额" />
        </el-form-item>
        <el-form-item label="退款数" prop="refundNum">
          <el-input v-model="form.refundNum" placeholder="请输入退款数" />
        </el-form-item>
        <el-form-item label="未通过原因" prop="failMessage">
          <el-input v-model="form.failMessage" placeholder="请输入未通过原因" />
        </el-form-item>
        <el-form-item label="状态改变时间" prop="statusTime">
          <el-date-picker clearable
                          v-model="form.statusTime"
                          type="date"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择状态改变时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="管理/客服ID" prop="adminId">
          <el-input v-model="form.adminId" placeholder="请输入管理/客服ID" />
        </el-form-item>
        <el-form-item label="是否删除：0代表存在 2代表删除）" prop="isDel">
          <el-input v-model="form.isDel" placeholder="请输入是否删除：0代表存在 2代表删除）" />
        </el-form-item>
        <el-form-item label="后台删除标志" prop="delFlag">
          <el-input v-model="form.delFlag" placeholder="请输入后台删除标志" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 订单详情页面 -->
    <el-drawer
      title="订单详情"
      :visible.sync="tableOrder"
      direction="rtl"
      size="60%">
      <div class="striping"></div>
      <!-- 注意这里没有额外的 margin-top div，因为横线已经位于顶部 -->
      <div class="self-adaption"> <!-- 调整高度以适应内容和其他元素 -->
        <div>
          <div class="head">
            <div class="full">
              <!--              <i class="el-icon-notebook-2" style="width: 60px; height: 60px; font-size: 60px; color: #0256ff;"></i>-->
              <img :src="orderData.orderIcon" class="order_icon">
              <div class="text">
                <div class="title" style="">普通订单</div>
                <div>
                  <span class="mr20">订单号：{{ orderData.orderSn }}</span>
                </div>
              </div>
            </div>
            <ul class="list">
              <li class="item">
                <div class="title">订单状态</div>
                <div>{{ orderData.getStatusName }}</div>
              </li>
              <li class="item">
                <div class="title">实际支付</div>
                <div>¥ {{ orderData.payPrice }}</div>
              </li>
              <li class="item">
                <div class="title">支付方式</div>
                <div>{{ orderData.payTypeName }}</div>
              </li>
              <li class="item">
                <div class="title">支付时间</div>
                <div>{{ orderData.payTime }}</div>
              </li>
            </ul>
          </div>
          <el-tabs type="border-card">
            <el-tab-pane label="订单信息">
              <div class="el-tabs__content">
                <div class="el-tab-pane">
                  <!--用户信息-->
                  <div class="section">
                    <div class="title">用户信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>用户名称：</div>
                        <div class="value">{{ orderData.realName }}</div>
                      </li>
                      <li class="item">
                        <div>绑定电话：</div>
                        <div class="value">{{ orderData.userPhone }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--收货信息-->
                  <div class="section">
                    <div class="title">收货信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>收货人：</div>
                        <div class="value">{{ orderData.realName }}</div>
                      </li>
                      <li class="item">
                        <div>收货电话：</div>
                        <div class="value">{{ orderData.userPhone }}</div>
                      </li>
                      <li class="item">
                        <div>收货地址：</div>
                        <div class="value">{{ orderData.userAddress }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--订单信息-->
                  <div class="section">
                    <div class="title">订单信息</div>
                    <ul class="list">
                      <li class="item">
                        <div>创建时间：</div>
                        <div class="value">{{ orderData.createTime }}</div>
                      </li>
                      <li class="item">
                        <div>商品总数：</div>
                        <div class="value">{{ orderData.totalNum }}</div>
                      </li>
                      <li class="item">
                        <div>商品总价：</div>
                        <div class="value">{{ orderData.totalPrice }}</div>
                      </li>
                      <li class="item">
                        <div>实际支付：</div>
                        <div class="value">{{ orderData.payPrice }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--买家留言-->
                  <div class="section">
                    <div class="title">买家留言</div>
                    <ul class="list">
                      <li class="item">
                        <div>{{ orderData.mark ? orderData.mark : '-' }}</div>
                      </li>
                    </ul>
                  </div>
                  <!--订单备注-->
                  <div class="section">
                    <div class="title">订单备注</div>
                    <ul class="list">
                      <li class="item">
                        <div>{{ orderData.remark ? orderData.remark : '-' }}</div>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="商品信息">
              <el-table :data="this.orderData.orderGoodsData">
                <el-table-column label="商品信息" width="300">
                  <template slot-scope="scope">
                    <div class="product-info">
                      <div class="product-image">
                        <el-image
                          :src="domainPrefix + scope.row.image"
                          fit="fill"
                          style="width: 50px; height: 50px;"
                        ></el-image>
                      </div>
                      <div class="product-title">
                        <el-tooltip placement="top" effect="dark">
                          <div slot="content" class="tooltip-content">
                            商品名称：{{ scope.row.title }}<br />
                          </div>
                          <div class="ellipsis-text">{{ scope.row.title }}</div>
                        </el-tooltip>
                      </div>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column property="totalPrice" label="支付价格"></el-table-column>
                <el-table-column property="goodsNum" label="购买数量"></el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="订单记录">
              <el-table :data="this.orderData.logData">
                <el-table-column property="orderId" label="订单ID"></el-table-column>
                <el-table-column property="records" label="操作记录"></el-table-column>
                <el-table-column property="createTime" label="操作时间"></el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </el-drawer>
    <!-- 修改售后备注页面 -->
    <el-dialog :title="titleRemark" :visible.sync="openRemark" width="500px" append-to-body>
      <el-form ref="form" :model="formRemark" :rules="rulesRemark" label-width="120px">
        <el-form-item label="订单备注:" prop="remark">
          <el-input type="textarea" v-model="formRemark.remark" placeholder="请输入订单备注"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRemark">确 定</el-button>
        <el-button @click="cancelRemark">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 立即退款页面 -->
    <el-dialog :title="titleRefund" :visible.sync="openRefund" width="500px" append-to-body>
      <el-form ref="form" :model="formRefund" label-width="120px">
        <el-form-item label="订单编号:" prop="orderRefundSn">
          <el-input v-model="formRefund.orderRefundSn" placeholder="请输入订单编号" :disabled="true"/>
        </el-form-item>
        <el-form-item label="退款金额:" prop="payPrice">
          <el-input-number
            v-model.number="formRefund.payPrice"
            :precision="2"
            :step="0.1"
            controls-position="right"
            :min="0"
            :max="formRefund.payPrice"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormRefund">确 定</el-button>
        <el-button @click="cancelRefund">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 不退款页面 -->
    <el-dialog :title="titleNotRefund" :visible.sync="openNotRefund" width="500px" append-to-body>
      <el-form ref="form" :model="formNotRefund" :rules="rulesNotRefund" label-width="120px">
        <el-form-item label="不退款编号:" prop="orderRefundSn">
          <el-input v-model="formNotRefund.orderRefundSn" placeholder="请输入不退款编号" :disabled="true"/>
        </el-form-item>
        <el-form-item label="不退款原因:" prop="failMessage">
          <el-input type="textarea" v-model="formNotRefund.failMessage" placeholder="请输入不退款原因"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormNotRefund">确 定</el-button>
        <el-button @click="cancelNotRefund">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  listRefund,
  getRefund,
  delRefund,
  addRefund,
  updateRefund,
  saveOrderRefundRemark,
  saveOrderNotRefund
} from '@/api/order/refund'
import { getOrder, refundOrder } from '@/api/order/order'

export default {
  name: "Refund",
  data() {
    return {
      tableOrder: false,
      orderData:{},
      domainPrefix: process.env.VUE_APP_BASE_API,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 订单退款表格数据
      refundList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      titleRemark: "",
      // 是否显示弹出层（修改订单备注）
      openRemark: false,
      // 弹出层标题（订单退款）
      titleRefund: "",
      // 是否显示弹出层（订单退款）
      openRefund: false,
      // 弹出层标题（订单不退款）
      titleNotRefund: "",
      // 是否显示弹出层（订单不退款）
      openNotRefund: false,
      statusOptions: [
        { value: 0, label: '退款中' },
        { value: -1, label: '拒绝退款' },
        /* { value: 1, label: '待退货' },
        { value: 2, label: '待收货' }, */
        { value: 3, label: '已退款' },
      ],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderRefundSn: null,
        orderId: null,
        uid: null,
        merId: null,
        extensionOne: null,
        extensionTwo: null,
        merDeliveryUser: null,
        merDeliveryAddress: null,
        phone: null,
        mark: null,
        pics: null,
        refundType: null,
        refundMessage: null,
        refundPrice: null,
        refundNum: null,
        failMessage: null,
        status: null,
        statusTime: null,
        adminId: null,
        isDel: null,
      },
      // 表单参数
      form: {},
      formRemark: {},
      // 表单退款参数
      formRefund: {},
      formNotRefund: {},
      // 表单校验
      rules: {
      },
      rulesRemark: {
        remark: [
          { required: true, message: "订单备注不能为空", trigger: "blur" }
        ],
      },
      rulesNotRefund: {
        failMessage: [
          { required: true, message: "不退款原因不能为空", trigger: "blur" }
        ],
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询订单退款列表 */
    getList() {
      this.loading = true;
      listRefund(this.queryParams).then(response => {
        this.refundList = response.data.data;
        this.total = response.data.total??0;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancelRemark() {
      this.openRemark = false;
    },
    // 取消按钮
    cancelRefund() {
      this.openRefund = false;
    },
    // 取消按钮
    cancelNotRefund() {
      this.openNotRefund = false;
    },
    // 表单重置
    reset() {
      this.form = {
        orderRefundId: null,
        orderRefundSn: null,
        orderId: null,
        uid: null,
        merId: null,
        extensionOne: null,
        extensionTwo: null,
        merDeliveryUser: null,
        merDeliveryAddress: null,
        phone: null,
        mark: null,
        remark: null,
        pics: null,
        refundType: null,
        refundMessage: null,
        refundPrice: null,
        refundNum: null,
        failMessage: null,
        status: null,
        statusTime: null,
        createTime: null,
        adminId: null,
        isDel: null,
        delFlag: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.orderRefundId)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    // 更多操作触发
    handleCommand(command, row) {
      switch (command) {
        case "handleDetails":
          this.handleDetails(row);
          break;
        case "handleRefundOrder":
          this.handleRefundOrder(row);
          break;
        case "handleNotReceiveOrder":
          this.handleNotReceiveOrder(row);
          break;
        case "handleRemark":
          this.handleRemark(row);
          break;
        default:
          break;
      }
    },

    handleNotReceiveOrder(row){
      this.formNotRefund = row;
      this.openNotRefund = true;
      this.titleNotRefund = "不退款原因";
    },

    /** 订单退款按钮操作 */
    handleRefundOrder(row) {
      this.formRefund = row;
      this.formRefund.payPrice = Number(this.formRefund.refundPrice);
      this.openRefund = true;
      this.titleRefund = "订单退款";
    },

    /** 订单退款提交按钮 */
    submitFormRefund(){
      refundOrder(this.formRefund).then(response => {
        this.$modal.msgSuccess("订单退款成功");
        this.openRefund = false;
        this.getList();
      });
    },

    /** 订单不退款提交按钮 */
    submitFormNotRefund(){
      const failMessage = this.formNotRefund.failMessage;
      const orderRefundId = this.formNotRefund.orderRefundId;
      const orderId = this.formNotRefund.orderId;
      if(failMessage && orderRefundId && orderId){//两个值同时存在
        saveOrderNotRefund(orderRefundId,failMessage,orderId).then(response => {
          this.$modal.msgSuccess("订单操作成功");
          this.openNotRefund = false;
          this.getList();
        });
      }else{
        this.$modal.msgError("不退款原因不能为空");
      }
    },

    /** 订单备注按钮操作 */
    handleRemark(row){
      console.log(row);
      this.formRemark = row;
      this.openRemark = true;
      this.titleRemark = "修改订单备注";
    },
    /** 订单备注修改提交按钮 */
    submitFormRemark(){
      const remark = this.formRemark.remark;
      const orderRefundId = this.formRemark.orderRefundId;
      if(remark && orderRefundId){//两个值同时存在
        saveOrderRefundRemark(orderRefundId,remark).then(response => {
          this.$modal.msgSuccess("售后备注修改成功");
          this.openRemark = false;
          this.getList();
        });
      }else{
        this.$modal.msgError("订单备注不能为空");
      }
    },
    /** 订单详情按钮操作 */
    handleDetails(row) {
      const orderId = row.orderId || this.ids
      getOrder(orderId).then(response => {
        this.orderData = response.data;
        this.orderData.mark = row.mark;
        this.orderData.remark = row.remark;
        // 定义状态码到状态名的映射表
        const statusMap = {
          0: '未发货',
          1: '待收货',
          2: '待评价',
          3: '已完成',
          4: '拼团中',
          // 可以添加其他状态码和对应的状态名
        };

        // 定义支付方式到支付名称的映射表
        const payTypeMap = {
          0: '余额支付',
          1: '微信支付',
          2: '微信支付', // 假设这里的1,2,3都是微信支付的不同类型，可以合并处理
          3: '微信支付',
          4: '支付宝支付',
          5: '线下支付',
          6: '线下支付', // 假设这里的5和6都是线下支付的不同类型，可以合并处理
          // 可以添加其他支付方式和对应的支付名称
        };

        // 根据paid和status设置getStatusName
        this.orderData.getStatusName = this.orderData.paid === 1
          ? statusMap[this.orderData.status] || '已退款' // 使用||来处理未知状态
          : '未支付';

        // 根据paid和payType设置payTypeName和payTime
        if (this.orderData.paid === 1) {
          this.orderData.payTypeName = payTypeMap[this.orderData.payType] || ''; // 使用||来处理未知支付方式
          // 如果需要，可以在这里设置payTime，否则保持为空
        } else {
          this.orderData.payTypeName = '';
          this.orderData.payTime = '';
        }
        this.tableOrder = true;
      });
    },




    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加订单退款";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const orderRefundId = row.orderRefundId || this.ids
      getRefund(orderRefundId).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改订单退款";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.orderRefundId != null) {
            updateRefund(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRefund(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const orderRefundIds = row.orderRefundId || this.ids;
      this.$modal.confirm('是否确认删除订单退款编号为"' + orderRefundIds + '"的数据项？').then(function() {
        return delRefund(orderRefundIds);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('system/refund/export', {
        ...this.queryParams
      }, `refund_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style>
.el-drawer__header{
  margin-bottom: 16px;
}
.striping {
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 10px;
}
.head{
  padding: 24px 35px;
}
.head .list {
  display: flex;
  margin-top: 20px;
  overflow: hidden;
  list-style: none;
  padding: 0;
}
.head .list .item {
  -webkit-box-flex: 0;
  flex: none;
  width: 200px;
  font-size: 14px;
  line-height: 14px;
  color: rgba(0,0,0,.85);
}
.head .list .item .title {
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 13px;
  color: #666;
}
.head .full {
  display: flex;
  -webkit-box-align: center;
  align-items: center;
}
.order_icon {
  width: 60px;
  height: 60px;
}
.text {
  align-self: center;
  -webkit-box-flex: 1;
  flex: 1;
  min-width: 0;
  padding-left: 12px;
  font-size: 13px;
  color: #606266;
}
.mr20 {
  margin-right: 20px!important;
}
.text .title {
  margin-bottom: 10px;
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
  color: rgba(0,0,0,.85);
}
.self-adaption {
  overflow-y: auto;
  max-height: calc(100% - 50px);
}
.el-tabs__content {
  padding: 0 35px;
}
.section {
  padding: 25px 0;
  border-bottom: 1px dashed #eee;
}
.section .title {
  padding-left: 10px;
  border-left: 3px solid #0256ff;
  font-size: 15px;
  line-height: 15px;
  color: #303133;
}
.section .list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
}
.section .item {
  padding-right: 20px;
  -webkit-box-flex: 0;
  flex: 0 0 33.3333333333%;
  display: flex;
  margin-top: 16px;
  font-size: 13px;
  color: #666;
}
.section .value {
  -webkit-box-flex: 1;
  flex: 1;
}
.product-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px; /* 根据需要调整 */
}
.product-info {
  display: flex;
  align-items: center;
}
.product-image {
  margin-right: 10px; /* 根据需要调整图片和名称之间的间距 */
}
.product-title {
  position: relative;
  flex: 1; /* 让标题占据剩余的空间 */
}
.tooltip-content {
  white-space: normal; /* 确保工具提示内容正常换行 */
}
.ellipsis-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 限制显示的行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2em; /* 根据你的字体大小和行高调整 */
  max-height: 2.4em; /* 行数乘以行高 */
}
</style>
